<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!--01_元素内容操作:元素以及元素内容的部分
		  .html()  无参---功能:获取匹配元素中第一元素的内容
		           有参---功能:【设置】将匹配的元素集合中所有元素替换为新元素
		       特点：针对  内容  + 元素
		  .val()   无参---功能:表单内元素:input、select生效
		                      获取表单内元素中第一个元素的内容
				   有参---功能:表单内元素:input、select生效	
							 input元素直接显示value
							 select元素不是显示
							 option 元素中内容显示：用户显示
							 option 元素中value值，
							 必须当前select中，option元素value值
							 直接赋值：打印select元素对象名称【object Object】
				特点：针对（表单内form元素可以包裹）元素的内容			 
		  .text()  无参--功能：获取匹配元素集合中所有元素的文本内容
		           有参--功能：【设置】匹配元素集合中的文本内容替换
				特点：元素中存在内容   -->
		  <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>Lorem1 </span>
		<span>Lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本框真实数据"/>
		<input type="text"  placeholder="输入框显示效果"/>
		<!--html：按钮 | 下拉列表 select>option*3 需要加value -->
		<!-- jq：点击按钮，设置下拉列表的值  |  html() 与val()有参是否参在区别 -->
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>test()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		<script>
			//1.找到 类名为 btn1 的按钮--点击--弹窗内容为 三个 p的内容
			//2.找到 类名为 btn2 的按钮--点击--lorem4\5\6 改成  "修改文本"【有参】
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext)
			});
			$(".btn2").click(function(){
				$("p").text("修改文本");
			});
			//$("button").click(function(){
				//设置元素第一个的值  1.直接设置下拉列表中value的值
			//	var rem=$("select").val("rem1");
				//设置元素第一个的值  2.得第一个值添加，设置的内容【本身存在】
			//	var rem=$("select").val();
				
				//[object Object] javaScript中 对象的默认字符串表示形态
				//select元素 对象 输出[object Object]
				
				//value的值：真实数据 option中的值：显示数据
				//object Object 测试：无参
			//alert("val()函数有参"+rem);
			//});
			//动态效果：点击按钮，获取第一个表单元素的内容，打印出来
			// $("button").click(function(){
			// 	/* 注意：js变量名不可以为关键字 in是关键字 */
			// 	var ins=$("input").val();
			// 	alert("val()函数无参："+ins);
			// });
			
			
			//有参:点击按钮--下面两个span  改成 lorem lorem
			/* $("button").click(function(){
				$("span").html("<span>lorem</span>")
			}); */
			
			//js变量[var i=1]==js变量  var  变量名=值、元素
			//无参数    html() 函数使用
			/* var html=$("span").html();
			//BOM方式 打印数据
			alert("无参数获取第一个元素内容:"=html); */
		</script>
	</body>
</html>